<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淘宝-淘！我喜欢</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.tb-promo {
				position: relative;
				width: 520px;
				height: 280px;
				background-color: #00FFFF;
				margin: 100px auto;
			}
			.tb-promo img {
				width: 520px;
				height: 280px;
			}
			/* 并集选择器写相同属性 */
			.prev,.next {
				position: absolute;
				top: 50%;
				margin-top: -15px;
				width: 20px;
				height: 30px;
				background-color: rgb(0,0,0,0.3);
				text-align: center;
				line-height: 30px;
				color: #ffffff;
				text-decoration: none;
			}
			.prev {
				left: 0;
				/* 绝对定位的盒子垂直居中 */
				border-top-right-radius: 15px;
				border-bottom-right-radius: 15px;
			}
			.next {
				right: 0;
				/* 绝对定位的盒子垂直居中 */		
				border-top-left-radius: 15px;
				border-bottom-left-radius: 15px;
			}
			.promo-nav {
				position: absolute;
				bottom: 15px;
				left: 50%;
				margin-left: -35px;
				width: 70px;
				height: 13px;
				background-color: rgba(255,255,255,0.5);
				border-radius: 7px;
			}
			.promo-nav li {
				float: left;
				margin: 3px;
				border-radius: 4px;
				list-style: none;
				width: 8px;
				height: 8px;
				background-color: #fff;
			}
			.promo-nav .selected{
				background-color: #FF5500;
			}
		</style>
	</head>
	<body>
		<div class="tb-promo">
			<img src="imgs/Taobao.jpg" >
			<!-- 左侧按钮 -->
			<a href="#" class="prev">&lt;</a>
			<!-- 右侧按钮 -->
			<a href="#" class="next">&gt;</a>
			<!-- 小圆点 -->
			<ul class="promo-nav">
				<li class="selected"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
